<template>
  <div class="info-card">
    <div class="card-header">
      <h3>{{ title }}</h3>
    </div>
    <div class="card-body">
      <slot></slot>
    </div>
  </div>
</template>

<script setup>
defineProps({
  title: String
});
</script>

<style scoped>
.info-card {
  border: 1px solid #e0e0e0;
  border-radius: 6px;
  overflow: hidden;
}

.card-header {
  padding: 12px 16px;
  background-color: #e6f7e6;
  border-bottom: 1px solid #e0e0e0;
}

.card-header h3 {
  margin: 0;
  color: #2e7d32;
  font-size: 16px;
}

.card-body {
  padding: 16px;
  background-color: white;
}
</style>